<template>
	<el-container class="app-wrapper">
		<el-header class="app-header" height="60px">
			<index-header></index-header>
		</el-header>
		
		<el-container class="app-container">
			<el-aside width="210px" class="app-sidebar">
				<index-aside></index-aside>
			</el-aside>
			
			<el-main class="app-main">
				<index-main></index-main>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import IndexHeader from '@/components/index/IndexHeader'
	import IndexAside from '@/components/index/IndexAsideStatic'
	import IndexMain from '@/components/index/IndexMain'
	export default {
		components: {
			IndexHeader,
			IndexAside,
			IndexMain
		}
	}
</script>

<style lang="scss" scoped>
	// 铺满全屏
	.app-wrapper {
		height: 100vh;
		width: 100%;
		overflow: hidden;
	}
	
	.app-header {
		padding: 0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		background-color: #fff;
		z-index: 999;
		border-bottom: 1px solid #ebeef5;
	}
	
	.app-container {
		height: calc(100vh - 60px);
	}
	
	.app-sidebar {
		background-color: #3f51b5;
		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
		z-index: 99;
		transition: width 0.3s;
	}
	
	.app-main {
		padding: 0;
		overflow-y: auto;
		background-color: #f5f7fa;
	}
</style>
